<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>查看教练数据</title>
    <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <!--引入样式-->
    <link rel="stylesheet" rel="stylesheet"  href="element-ui/lib/theme-chalk/index.css"/>
    <!-- 引入组件库 -->
    <script type="text/javascript" src="element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-tabs type="border-card">
        <el-tab-pane label="查看教练">
            <!--搜索教练表单-->
            <form class="form-inline">
                <div class="form-group">
                    <label for="exampleInputName2">搜索教练id</label>
                    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
                </div>

                <div class="form-group">
                    <label for="exampleInputName2">收费</label>
                    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
                </div>
                <div class="form-group">
                    <el-switch
                            style="display: block"
                            v-model="example.value1"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-text="已认证"
                            inactive-text="未认证">
                    </el-switch>
                </div>
                <button type="button" class="btn btn-default">Send invitation</button>
            </form>
            <!--渲染地图-->



            <!--渲染教练数据-->
            <ul>
                <li>渲染搜索用户
                    <button class="btn btn-default" type="button">关注</button>
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-sm">线下py交易</button>
                    <!--教练留验-->
                    <button class="btn btn-default" type="button">教练留言</button>
                    <el-button @click="drawer = true"  round style="margin-left: 16px;">
                        教练评价
                    </el-button>
                </li>
                <li>渲染搜索用户
                    <button class="btn btn-default" type="button">关注</button>
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-sm">线下py交易</button>
                    <button class="btn btn-default" type="button">教练留言</button>
                    <el-button @click="drawer = true"  round style="margin-left: 16px;">
                        教练评价
                    </el-button>
                </li>
                <!---->
                <!--点击某个教练id渲染教练评价-->
                <el-drawer
                        title="教练评价"
                        :visible.sync="drawer"
                        :direction="direction"
                        :before-close="handleClose">
                    <span>评价!</span>
                    <ul>
                        <li>教练那晚很棒！</li>
                        <li>器大活好不粘人</li>
                        <li>啊啊啊啊啊啊啊啊啊啊啊啊</li>
                        <li>好棒棒棒哦</li>
                        <li>啊啊啊啊啊啊啊啊啊啊啊啊</li>
                    </ul>
                </el-drawer>
            </ul>


        </el-tab-pane>



        <!--线下py交易-->
        <el-tab-pane label="约私教">
            <form class="form-inline">
                <div class="form-group">
                    <label for="exampleInputName2">搜索教练id</label>
                    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
                </div>
                <button type="button" class="btn btn-default">Send invitation</button>
            </form>
            <!--渲染该教练-->
            <!--如果教练选择好友公开则成为互相关注后才能看到电话信息,QQ,微信信息。-->
            <!--是否认证：
              官方认证  通过指定合作单位推荐认证。
                  场馆教练  显示签约场馆，
                  未认证 -->
            <ul>
                <li>渲染教练详细数据<el-button type="primary" round>py交易</el-button></li>
                <li>渲染教练详细数据<el-button type="primary" round>py交易</el-button></li>
            </ul>
        </el-tab-pane>
    </el-tabs>


    <!--线下交易模态框-->
    <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <!--交易form表单-->
                <form>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Password</label>
                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputFile">File input</label>
                        <input type="file" id="exampleInputFile">
                        <p class="help-block">Example block-level help text here.</p>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> Check me out
                        </label>
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            /*教练评价*/
            drawer: false, direction: 'btt',
            example:{
                value1:true,
            }
        },
        created:function () {
            // this.demo1();
        },
        methods:{
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            demo1:function(){
                $.ajax({
                    url:'http://localhost:8000/supcontroller/get',
                    type:'get',
//		                        data:_this.example,
                    dataType:'json',
                    success:function (data) {
                        console.log(data);
                    }
                });
            }
        }
    })
</script>
</body>
</html>
